<template>
  <div class="hello">
    <div class="header">
      <div class="avter">
        <img class="avter-img" :src="seller.avatar" alt="">
      </div>
      <div class="right-side">
        <div class="brand">
          <!-- <img class="img" src="" alt=""> -->
          <span class="icon"></span>
          <p class="title">{{seller.name}}</p>
        </div>
        <div class="Distribution">
          <p><span class="des">{{seller.description}}</span> /
          <span class="des">{{seller.deliveryTime}}分钟送达</span></p>
        </div>
        <div class="Discount">
            <div class="count">
             <sapn class="icon" :class="classmap[seller.supports[0].type]"></sapn>
             <span class="descp">{{seller.supports[0].description}}</span>
            </div>
            <div @click="popup" class="marker"><span class="num">5个</span><i class="iconfont">&#xe637;</i></div>
        </div>
      </div>
    </div>
    <!-- header下公告栏 -->
    <div class="Inferior-side"></div>
    <!-- header头部朦胧背景 -->
    <div class="filter"></div>
    <!-- popup弹出层 -->
    <transition name="fade">
    <div class="inner-layer" v-if="this.popups">
      <div class="core">
        <div class="title"><h2>{{seller.name}}</h2></div>
        <div class="star">
          <van-rate allow-half color="red" v-model="value" readonly />
        </div>
        <div class="notice">
          <span class="line"></span><p class="txt">优惠信息</p><span class="line"></span>
        </div>
        <div class="activity">
          <div class="souprt" v-for="item in seller.supports" :key="item.type">
            <span class="icon" :class="classmap[item.type]"></span>
            <span class="text">{{item.description}}</span>
          </div>
        </div>
        <div class="notice">
          <span class="line"></span><p class="txt">商家公告</p><span class="line"></span>
        </div>
        <div class="introduce">
          <span class="text">{{seller.bulletin}}</span>
        </div>

        <div @click="closepop" class="close"><i class="iconfont">&#xe61b;</i></div>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      classmap: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
      popups: false,
      value: 4.5
    }
  },
  props: {
    seller: {
      type: Object
    }
  },
  methods: {
    popup () {
      this.popups = !this.popups
    },
    closepop () {
      this.popups = !this.popups
    }
  },
  mounted () {
    console.log(this.seller)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .hello{
      width: 100%;
      height: auto;
      border-bottom: 1px solid #ccc;
      position: relative;
      .filter{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        color: rgba(7,17,27,0.5);
        background-image: url('http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg');
        filter: blur(6px);
        z-index: -1;
      }
      .header{
         padding: 24px 12px 18px 24px;
         display: flex;
         .avter{
           width: 76px;
           height: 70px;
           margin-right: 16px;
           .avter-img{
             width: 100%;
             height: 100%;
             border-radius: 4px;
           }
         }
         .right-side{
           width: 100%;
           .brand{
             display: flex;
             vertical-align: top;
             .icon{
               display: inline-block;
               width: 30px;
               height: 18px;
               background-image: url('brand@2x.png');
               background-size: 30px 18px;
             }
             .title{
               margin-left: 6px;
               font-size: 16px;
              //  color: w;
               font-weight: bold;
               line-height: 18px;
             }
           }
           .Distribution{
             margin: 8px auto 10px;
             .des{
               font-size: 12px;
               line-height: 12px;
             }
           }
           .Discount{
             vertical-align: top;
             display: flex;
             justify-content: space-between;
            .count{
              .icon{
              display: inline-block;
              width: 16px;
              height: 16px;
              vertical-align: top;
              &.decrease{
                width: 16px;
                height: 16px;
                background-image: url('decrease_1@2x.png');
                background-size: 16px 16px;
              }
            }
             .descp{
               font-size: 12px;
               line-height: 12px;
               margin-left: 4px;
             }
            }
             .marker{
               background-color: rgba(0,0,0,0.2);
               width: 36px;
               height: 24px;
               border-radius: 10px;
               padding: 4px 4px 0 4px;
               text-align: center;
               .iconfont{
                 color: white;
                 font-size: 12px;
               }
               .num{
                 font-size: 12px;
                 color: white;
               }
             }
           }
         }
      }
      .Inferior-side{
        width: 100%;
        height: 28px;
      }
      .inner-layer{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.7);
        padding: 64px 36px 32px;
        z-index: 200;
        .core{
          display: flex;
          flex-direction: column;
          align-items: center;
          .title{
            h2{
              color: white;
            }
          }
          .star{
            margin: 20px auto;
          }
          .notice{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px 0 24px;
            .line{
              width: 100px;
              height: 1px;
              border-bottom: 1px solid wheat;
            }
            .txt{
              color: white;
              padding: 0 16px;
            }
          }
          .activity{
            .souprt{
              font-size: 14px;
              line-height: 24px;
              .icon{
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-right: 6px;
                &.decrease{
                width: 16px;
                height: 16px;
                background-image: url('decrease_1@2x.png');
                background-size: 16px 16px;
              }
                &.discount{
                  width: 16px;
                  height: 16px;
                  background-image: url('discount_1@2x.png');
                  background-size: 16px 16px;
                }
                &.guarantee{
                  width: 16px;
                  height: 16px;
                  background-image: url('guarantee_1@2x.png');
                  background-size: 16px 16px;
                }
                &.invoice{
                  width: 16px;
                  height: 16px;
                  background-image: url('invoice_1@2x.png');
                  background-size: 16px 16px;
                }
                &.special{
                  width: 16px;
                  height: 16px;
                  background-image: url('special_1@2x.png');
                  background-size: 16px 16px;
                }
              }
              .text{
                color: white;
              }
            }
          }
          .introduce{
            padding: 24px 12px 0;
            .text{
              color: white;
              font-size: 14px;
              line-height: 20px;
            }
          }
          .close{
          position: absolute;
          bottom: 40px;
          left: 50%;
          margin-right: 12px;
          .iconfont{
            font-size: 24px;
            color: white;
          }
        }
        }
      }
    }
</style>
